<template>
		<div v-if="isTip" class="tcMask">
			<div class="tcPopBg">
				<div class="tcPop">
					<span>
							{{tipInfo}}
					</span>
				</div>
			</div>
		</div>

</template>

<script>

	// 事件总线：第11天 02-(掌握)首页开发-滚动区域的Bug分析和解决
	// 事件总线传值  https://www.cnblogs.com/ll15888/p/11583713.html
	// 可以传多个值
	// this.$bus.$emit("toastEvent","参数1","参数2","参数3");

	// this.$bus.$on("toastEvent",(parm00,parm01,parm02)=>{
	// 	console.log(parm00); // 参数0
	// 	console.log(parm01); // 参数1
	// 	console.log(parm02); // 参数2
	// 	this.tipMethod(1111);
	// });
	export default{
    name:"Toast",
		data(){
			return{
				tipInfo:"",
				isTip:false,
			}
		},
		created() {
			this.$bus.$on("toastEvent",(val01,val02)=>{
				this.tipMethod(val01,val02);
			});
		},
		methods:{
			tipMethod(val,fn){
				this.isTip=true;
				this.tipInfo=val;
				setTimeout(()=>{
					this.isTip=false;
					if(fn){
						fn();
					}
				},2500);
			}
		}
	}
</script>

<style>
	.tcMask{
		background-color: rgba(0,0,0,.3);
		position: fixed;
		top: 0;
		left: 0;
		z-index:12;
		width: 100%;
		height: 100%;
	}

	.tcPopBg{
		position: fixed;
		top: 0;
		left: 0;
		z-index:12;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.tcPop{
		background-color: #fff;
		border-radius: 8px;
		padding: 15px;
	}

	.tcPop span{
		color: #000;
		font-size: 15px;
		line-height: 22px;
		text-align: center;
		display: block;
	}

</style>
